<template>
	<view class="my">
		<view class="background"></view>
		<view class="my-msg">
			<image class="avatar" :src="'http://localhost:8088/file/downloadAvatar?t='+userData.avatar" mode=""></image>
			<view class="msg">
				<text>{{userData.name}}</text>
			</view>
			<view class="my-wallet">
				<view class="wallet" @click="switchTo('/pages/orderList/orderList')">
					<text>订单</text>
					<text>{{orderNum}}</text>
				</view>
				<view class="wallet" @click="goTo('/pages/user/recharge/recharge')">
					<text>储值</text>
					<text>￥{{userData.money.toFixed(2)}}</text>
				</view>
				<view class="wallet" @click="goTo('/pages/user/vipcard/vipcard')">
					<text>会员卡</text>
					<text>1</text>
				</view>
			</view>
		</view>
		<view class="my-ability">
			<uni-list>
				<uni-list-item clickable showArrow title="出示会员卡" @click="goTo('/pages/user/vipcard/vipcard')"/>
				<uni-list-item clickable showArrow title="储值充值" @click="goTo('/pages/user/recharge/recharge')"/>
				<uni-list-item clickable showArrow title="查看我的订单" @click="switchTo('/pages/orderList/orderList')"/>
			</uni-list>
			<button class="btn-logout" @click="logout()">退出登录</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userId: '',
				userData: {
					money: 0
				},
				orderNum: 0
			}
		},
		onLoad() {
			this.userId = JSON.parse(window.localStorage.getItem("user"));
			this.getMsg();
		},
		onShow() {
			this.userId = JSON.parse(window.localStorage.getItem("user"));
			this.getMsg();
		},
		methods: {
			getMsg() {
				uni.request({
					url: '/user/getUserMsg',
					method: 'GET',
					data: {
						userId: this.userId
					},
					success: (res) => {
						console.log(res);
						this.userData = res.data.data
					}
				});
				uni.request({
					url: "/order/getOrderNum",
					method: 'GET',
					data: {
						userId: this.userId
					},
					success: (res) => {
						console.log(res);
						this.orderNum = res.data.data
					}
				})
			},
			goTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			switchTo(url) {
				uni.switchTab({
					url: url
				})
			},
			logout() {
				uni.request({
					url: "/user/logout"
				}).then(res => {
					console.log(res);
					uni.navigateTo({
						url: '/pages/login/login'
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.background {
		position: absolute;
		top: -300rpx;
		left: -10%;
		width: 120%;
		height: 600rpx;
		border-radius: 50%;
		background-color: #e89abe;
		z-index: -1;
	}

	.my-msg,
	.my-ability {
		width: 90%;
		height: 300rpx;
		margin: 30rpx auto;
		padding-top: 20rpx;
		box-sizing: border-box;
		background-color: white;
		border-radius: 20rpx;
		box-shadow: 0rpx 5rpx 20rpx #dadada;
	}

	.my-ability {
		height: 600rpx;
		position: relative;

		.btn-logout {
			background-color: #e89abe;
			color: white;
			border-radius: 100rpx;
			position: absolute;
			width: 100%;
			bottom: -100rpx;
		}
	}

	.my-msg {
		margin-top: 100rpx;
		padding: 30rpx;
		box-sizing: border-box;

		.avatar {
			width: 140rpx;
			height: 140rpx;
			position: absolute;
			right: 70rpx;
			top: -70rpx;
			border-radius: 50%;
			border: 14rpx solid white;
		}

		.msg {
			margin-left: 30rpx;
			font-size: 60rpx;
			font-weight: 600;
			width: 350rpx;
			overflow: hidden;
		}

		.my-wallet {
			border-top: 2rpx solid #dfdfdf;
			margin-top: 30rpx;
			padding: 20rpx 0;
			display: flex;
			justify-content: space-between;
			text-align: center;

			.wallet {
				text-align: center;
				flex: 1;
			}
		}
	}

	.wallet text {
		display: block;
		line-height: 60rpx;
	}

	.wallet text:last-child {
		font-size: 40rpx;
		font-weight: 600;
	}
</style>